import { Card, CardBody, CardHeader } from "@heroui/react";

import DefaultLayout from "@/layouts/default";

export default function AnalysisPage() {
  // Mock data for statistics
  const statsData = [
    { title: "总销售额", value: "¥123,456", change: "+12%", description: "较昨日" },
    { title: "访问量", value: "12,345", change: "+8%", description: "较昨日" },
    { title: "支付笔数", value: "8,765", change: "+5%", description: "较昨日" },
    { title: "活跃用户", value: "3,456", change: "+3%", description: "较昨日" },
  ];

  // Mock data for sales chart
  const salesData = [
    { month: "1月", value: 65 },
    { month: "2月", value: 78 },
    { month: "3月", value: 90 },
    { month: "4月", value: 81 },
    { month: "5月", value: 95 },
    { month: "6月", value: 88 },
    { month: "7月", value: 92 },
    { month: "8月", value: 87 },
    { month: "9月", value: 94 },
    { month: "10月", value: 91 },
    { month: "11月", value: 96 },
    { month: "12月", value: 93 },
  ];

  // Mock data for visit data
  const visitData = [
    { hour: "0h", value: 20 },
    { hour: "2h", value: 35 },
    { hour: "4h", value: 30 },
    { hour: "6h", value: 50 },
    { hour: "8h", value: 80 },
    { hour: "10h", value: 90 },
    { hour: "12h", value: 100 },
    { hour: "14h", value: 95 },
    { hour: "16h", value: 85 },
    { hour: "18h", value: 90 },
    { hour: "20h", value: 70 },
    { hour: "22h", value: 40 },
  ];

  // Mock data for team members
  const teamMembers = [
    { id: 1, name: "张三", role: "产品经理", progress: 85 },
    { id: 2, name: "李四", role: "前端开发", progress: 70 },
    { id: 3, name: "王五", role: "后端开发", progress: 90 },
    { id: 4, name: "赵六", role: "UI设计师", progress: 75 },
  ];

  // Mock data for recent orders
  const recentOrders = [
    { id: 1, product: "iPhone 12", price: "¥6,999", status: "已支付" },
    { id: 2, product: "MacBook Pro", price: "¥12,999", status: "已发货" },
    { id: 3, product: "AirPods", price: "¥1,299", status: "已完成" },
    { id: 4, product: "iPad", price: "¥3,999", status: "待支付" },
    { id: 5, product: "Apple Watch", price: "¥2,999", status: "已支付" },
  ];

  return (
    <DefaultLayout>
      <div className="flex flex-col gap-6 py-6">
        {/* Page Title */}
        <div className="flex flex-col gap-2">
          <h1 className="text-2xl font-bold">分析页</h1>
          <p className="text-default-500">数据分析和业务洞察</p>
        </div>

        {/* Statistics Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {statsData.map((stat, index) => (
            <Card key={index} className="border-none shadow-sm">
              <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
                <p className="text-tiny uppercase font-bold text-default-500">{stat.title}</p>
                <h4 className="font-bold text-large">{stat.value}</h4>
              </CardHeader>
              <CardBody className="overflow-visible py-2">
                <div className="flex items-center gap-1">
                  <span className="text-success text-tiny">{stat.change}</span>
                  <span className="text-default-500 text-tiny">{stat.description}</span>
                </div>
              </CardBody>
            </Card>
          ))}
        </div>

        {/* Charts Section */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Sales Chart */}
          <Card className="shadow-sm">
            <CardHeader className="flex gap-3">
              <div className="flex flex-col">
                <p className="text-md">销售趋势</p>
                <p className="text-small text-default-500">年度销售数据</p>
              </div>
            </CardHeader>
            <CardBody>
              {/* Simple bar chart representation */}
              <div className="flex items-end justify-between h-64 gap-1">
                {salesData.map((item, index) => (
                  <div key={index} className="flex flex-col items-center flex-1">
                    <div className="text-tiny text-default-500 mb-1">{item.month}</div>
                    <div 
                      className="w-full bg-primary rounded-t-lg transition-all duration-500 ease-in-out hover:opacity-80"
                      style={{ height: `${item.value}%` }}
                    ></div>
                  </div>
                ))}
              </div>
            </CardBody>
          </Card>

          {/* Visit Chart */}
          <Card className="shadow-sm">
            <CardHeader className="flex gap-3">
              <div className="flex flex-col">
                <p className="text-md">访问量统计</p>
                <p className="text-small text-default-500">24小时访问数据</p>
              </div>
            </CardHeader>
            <CardBody>
              {/* Simple line chart representation */}
              <div className="h-64 relative">
                <div className="absolute inset-0 flex items-end">
                  <div className="w-full h-full relative">
                    {/* Grid lines */}
                    <div className="absolute inset-0 flex flex-col justify-between">
                      {[0, 1, 2, 3, 4].map((i) => (
                        <div key={i} className="border-t border-default-100"></div>
                      ))}
                    </div>
                    
                    {/* Line */}
                    <svg className="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                      <polyline
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        points={visitData.map((item, index) => 
                          `${(index / (visitData.length - 1)) * 100},${100 - item.value}`
                        ).join(' ')}
                        className="text-primary"
                      />
                      {visitData.map((item, index) => (
                        <circle
                          key={index}
                          cx={(index / (visitData.length - 1)) * 100}
                          cy={100 - item.value}
                          r="1.5"
                          fill="currentColor"
                          className="text-primary"
                        />
                      ))}
                    </svg>
                  </div>
                </div>
              </div>
            </CardBody>
          </Card>
        </div>

        {/* Team Progress and Recent Orders */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Team Progress */}
          <Card className="shadow-sm">
            <CardHeader>
              <p className="text-md">团队进度</p>
            </CardHeader>
            <CardBody>
              <div className="space-y-4">
                {teamMembers.map((member) => (
                  <div key={member.id} className="flex flex-col gap-2 py-2 border-b border-default-200 last:border-0">
                    <div className="flex justify-between">
                      <div className="flex flex-col">
                        <p className="text-md font-medium">{member.name}</p>
                        <p className="text-small text-default-500">{member.role}</p>
                      </div>
                      <span className="text-small font-medium">{member.progress}%</span>
                    </div>
                    <div className="w-full bg-default-100 rounded-full h-2">
                      <div 
                        className="bg-primary h-2 rounded-full" 
                        style={{ width: `${member.progress}%` }}
                      ></div>
                    </div>
                  </div>
                ))}
              </div>
            </CardBody>
          </Card>

          {/* Recent Orders */}
          <Card className="shadow-sm">
            <CardHeader>
              <p className="text-md">最近订单</p>
            </CardHeader>
            <CardBody>
              <div className="space-y-3">
                {recentOrders.map((order) => (
                  <div key={order.id} className="flex items-center justify-between py-2 border-b border-default-200 last:border-0">
                    <div className="flex flex-col">
                      <p className="text-md font-medium">{order.product}</p>
                      <p className="text-small text-default-500">{order.price}</p>
                    </div>
                    <span className={`px-2 py-1 rounded text-tiny font-medium ${
                      order.status === "已支付" || order.status === "已完成"
                        ? "bg-success/20 text-success" 
                        : order.status === "已发货"
                          ? "bg-warning/20 text-warning" 
                          : "bg-default/20 text-default"
                    }`}>
                      {order.status}
                    </span>
                  </div>
                ))}
              </div>
            </CardBody>
          </Card>
        </div>
      </div>
    </DefaultLayout>
  );
}